<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入 jstl--%>
<%@include file="common/tag.jsp" %>
<!DOCTYPE html>
<%-- 获取资源根路径--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>首页</title>
    <%@include file="common/head.jsp" %>
    <script src="/./resource/js/list.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #container {
            min-height: 100%;
            height: auto !important;
            height: 100%; /*IE6不识别min-height*/
            position: relative;
        }

        #page {
            width: 100%;
            margin-bottom: 50px; /*等于footer的高度*/
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        a:hover, a:visited, a:link, a:active {
            text-decoration: none;
            color: #000000;
        }

        .line {
            border-bottom: 1px solid #e4e9f0;
        }

        .mid_line {
            border-bottom: 4px solid #e4e9f0;
        }

        .loginBg {
            background: #F5F5F5;
        }

        .pageNum {
            margin-top: 20px;
            text-align: center;
        }

        span {
            display: inline-block;
        }

        .newsR {
            width: 315px;
            margin-left: 10px;
            overflow: hidden;
        }

        .fl {
            float: left;
        }

        .newsR .div-main {
            padding: 0 18px 30px 12px;
            background: #fff;
        }

        .newsR .top {
            height: 40px;
            border-bottom: 1px solid #dddddd;
            font-size: 18px;
        }

        ol, ul, li {
            margin: 0;
            padding: 0;
            list-style-type: none;
            list-style: none;

        }

        .rank li i {
            display: inline-block;
            width: 22px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            color: #fff;
            background: #dcdcdc;
            float: left;
        }

        .first {
            background: #e35b49 !important;
        }

        .rank li span {
            display: inline-block;
            margin-left: 7px;
            color: #333;
        }

        .headtitle {
            display: block;
            margin: 10px 0 25px 0;
            border-bottom: 1px solid #e4e9f0;
        }

        ul.unstyled, ol.unstyled {
            display: block;
            /*margin: 10px 0 25px 0;*/
            text-align: left;
            list-style: none;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body background="/./resource/images/bg.jpg" style="background-size: cover;background-repeat: no-repeat;">
<%--页面显示部分--%>
<div id="container" class="container">
    <jsp:include page="common/Top.jsp"/>
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <%--<li data-target="#myCarousel" data-slide-to="2"></li>--%>
        </ol>

        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <a href="${pageContext.request.contextPath}"> <img src="/./resource/images/college.png"
                                                                   style="width: 100%;height: 300px" alt="First slide"></a>
            </div>
            <div class="item">
                <a href="${pageContext.request.contextPath}"> <img src="/./resource/images/logo2.png"
                                                                   style="width: 100%;height: 300px" alt="Second slide"></a>
            </div>
            <%-- <div class="item">
                 <img src="/./resource/images/logo1.png" style="width: 100%;height: 100px" alt="Third slide">
             </div>--%>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
    <div id="page" class="panel panel-default">
        <div class="panel-heading" hidden>
            <h5>竞赛通知列表</h5>
        </div>
        <div class="panel-body">
            <div class="col-md-8">
                <%--最新公告--%>
                <div style="width: auto;padding: 20px;">
                    <div class="line">
                        <span style="font-size: 18px;margin-bottom: 0px;">最新通知</span><span
                            style="font-size: 12px;color: #666666;float: right;margin-right: 10px;margin-bottom: 0px;"><a
                            href='${pageContext.request.contextPath}/article/articleList'>更多 >></a></span>
                    </div>
                    <table style="border: 0px solid transparent !important;width: 100%;margin-top: 10px;">
                        <tbody>
                        <c:forEach var="article" items="${articleList}">
                            <tr>
                                <td style="width: 80%;"><a
                                        href='${pageContext.request.contextPath}/article/findById?id=${article.articleId}'>${article.articleTitle}</a>
                                </td>
                                <td style="width: 20%;">
                                    <a href='${pageContext.request.contextPath}/article/findById?id=${article.articleId}'><fmt:formatDate
                                            value="${article.articleCreateTime}" pattern="yyyy-MM-dd"/></a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class='page fix pageNum' hidden>
                        共 <b>${page.totalNumber}</b> 条
                        <c:if test="${page.currentPage != 1}">
                            <a href="<%= basePath %>message/page?page=1" class='first'>首页</a>
                            <a href="<%= basePath %>message/page?page=${page.currentPage-1}" class='pre'>上一页</a>
                        </c:if>
                        当前第<span>${page.currentPage}/${page.totalPage}</span>页
                        <c:if test="${page.currentPage != page.totalPage}">
                            <a href="<%= basePath %>message/page?page=${page.currentPage+1}"
                               class='next'>下一页</a>
                            <a href="<%= basePath %>message/page?page=${page.totalPage}" class='last'>末页</a>
                        </c:if>
                    </div>
                </div>

                <div class="mid_line"></div>
                <%--最新公告--%>
                <div style="margin-top: 20px;width: auto;padding: 20px;">
                    <div class="line">
                        <span style="font-size: 18px;margin-right: 20px;text-align: center;">最新竞赛信息</span>
                        <span style="font-size: 12px;color: #666666;float: right;margin-right: 10px;margin-bottom: 0px;"><a
                                href='${pageContext.request.contextPath}/message/messageList'>更多 >></a></span>
                    </div>
                    <table style="border: 0px solid transparent !important;width: 100%;margin-top: 10px;">
                        <tbody>
                        <c:forEach var="messageanduser" items="${list}">
                            <tr>
                                <td style="width: 80%;"><a
                                        href="/message/detail?messageId=${messageanduser.messageId}">${messageanduser.messageTitle}</a>
                                </td>
                                <td style="width: 20%;">
                                    <a href="/message/detail?messageId=${messageanduser.messageId}"><fmt:formatDate
                                            value="${messageanduser.createTime}" pattern="yyyy-MM-dd"/></a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                    <div class='page fix pageNum' hidden>
                        共 <b>${page.totalNumber}</b> 条
                        <c:if test="${page.currentPage != 1}">
                            <a href="<%= basePath %>message/page?page=1" class='first'>首页</a>
                            <a href="<%= basePath %>message/page?page=${page.currentPage-1}" class='pre'>上一页</a>
                        </c:if>
                        当前第<span>${page.currentPage}/${page.totalPage}</span>页
                        <c:if test="${page.currentPage != page.totalPage}">
                            <a href="<%= basePath %>message/page?page=${page.currentPage+1}"
                               class='next'>下一页</a>
                            <a href="<%= basePath %>message/page?page=${page.totalPage}" class='last'>末页</a>
                        </c:if>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <%--登录--%>
                <c:choose>
                    <c:when test="${sessionScope.user != null}">
                    </c:when>
                    <c:otherwise>
                        <div style="border: 2px solid #E8E8E8;width: auto;">
                            <p class="loginBg" style="width: 100%;height: 40px;padding-left: 20px;padding-top: 10px;">
                                登录</p>
                            <form action="/login/addUser" method="post" class="form-horizontal">
                                <div class="form-group">
                                    <label for="userName" class="col-lg-3 control-label">用户名</label>
                                    <div class="col-lg-9 control-label" style="padding-right: 20px;">
                                        <input id="userName" class="form-control" type="text" name="userName"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="password" class="col-lg-3 control-label">密 码</label>
                                    <div class="col-lg-9 control-label" style="padding-right: 20px;">
                                        <input id="password" class="form-control" type="password" name="password"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-lg-2 col-lg-offset-1">
                                            <input class="btn" type="submit" value="登录"/>
                                        </div>
                                        <div class="col-lg-2 col-lg-offset-0">
                                            <input class="btn" type="reset" value="重新填写"/>
                                        </div>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </c:otherwise>
                </c:choose>

                <div class="newsR fl">
                    <div class="div-main">
                        <div class="headtitle"><h4>热门竞赛</h4></div>
                        <ul class="unstyled">
                            <li class="top3"><a title="第八届全国大学生数学竞赛暨上海市大学生数学竞赛的报名通知"
                                                href="/message/detail?messageId=1008">第八届全国大学生数学竞赛暨上海市大学生数学竞赛的报名通知</a>
                            </li>
                            <li class="top3"><a title="关于举办“重庆工商大学第九届大学生数学建模竞赛暨2016年全国大学生数学建模竞赛校内选拔赛”的通知"
                                                href="/message/detail?messageId=1008">关于举办“重庆工商大学第九届大学生数学建模竞赛暨2016年全国大学生数学建模竞赛校内选拔赛”的通知</a>
                            </li>
                            <li class="top3"><a title="关于公布重庆工商大学第九届大学生数学建模竞赛获奖名单的通知"
                                                href="/message/detail?messageId=1008">关于公布重庆工商大学第九届大学生数学建模竞赛获奖名单的通知</a>
                            </li>
                            <li class=""><a title="全国大学生数学竞赛"
                                            href="/message/detail?messageId=1008">全国大学生数学竞赛</a>
                            </li>
                            <li class=""><a title="关于组织学生参加2016年全国大学生数学建模竞赛校内选拔讲座的通知"
                                            href="/message/detail?messageId=1008">关于组织学生参加2016年全国大学生数学建模竞赛校内选拔讲座的通知</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <jsp:include page="common/footer.jsp"/>
</div>
</body>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>